<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="./css/swiper.min.css">
    <script type="text/javascript" src="./tools/jquery.min.js"></script>

		<style>
/** 分类及焦点图 **/
.column .xtx_entry {
  height: 500px;
  background-color: #f2f2f2;
  position: relative;
}

.column .xtx_category {
  width: 250px;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 9;
}


.column .xtx_category_super li {
  height: 50px;
  padding: 0 20px 0 40px;
  /* transition: background-color 0.25s; */
  cursor: pointer;
}

.column .xtx_category_super li:hover,
.column .xtx_category_super li.active {
  background-color: #27BA9B;
}

.column .xtx_category_super a {
  color: #fff;
  font-size: 16px;
  line-height: 50px;
}
.column .xtx_category_super a small {
  font-size: 14px;
}
.column .xtx_banner {
  width: 100%;
  height: 500px;
}
.column .xtx_banner img{
  widows: 98px;
  height: 500px;	
}
.column .xtx_banner .item{
	display: none;
}
.column .xtx_banner .active {
  display: block;
}

       .mi input {
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
        }

        .result-list {
            display: none;
            width: 160px;
			background-color: white;
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            /* border: 1px solid #ff6700;	 */
			position: absolute;
			z-index: 99999;
        }
        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;

        }
        .result-list a:hover {
            background-color: #eee;
        }
</style>
	</head>
	<body>
		<div class="xtx_topnav">
		  <div class="wrapper">
		    <!-- 顶部导航 -->
		    <ul class="xtx_navs">
		      <li>
		        <a href="./login.html">请先登录</a>
		      </li>
		      <li>
		        <a href="./register.html">免费注册</a>
		      </li>
		      <li>
		        <a href="javascript:;">我的订单</a>
		      </li>
		      <li>
		        <a href="javascript:;">会员中心</a>
		      </li>
		      <li>
		        <a href="javascript:;">帮助中心</a>
		      </li>
		      <li>
		        <a href="javascript:;">在线客服</a>
		      </li>
		      <li>
		        <a href="javascript:;">
		          <i class="mobile sprites"></i>
		          手机版
		        </a>
		      </li>
		    </ul>
		  </div>
		</div>
		<!-- 头部 -->
		<div class="xtx_header">
		  <div class="wrapper">
		    <!-- 网站Logo -->
		    <h1 class="xtx_logo"><a href="./index.html"></a></h1>
		    <!-- 主导航 -->
		    <div class="xtx_navs">
		      <ul class="clearfix">
		        <li>
		          <a href="./index.html">首页</a>
		        </li>
		        <li>
		          <a href="recommend.html">热门推荐</a>
		        </li>
		        <li>
		          <a href="delicacy.html">当地美食</a>
		        </li>
		        <li>
		          <a href="travel.html">极速出行</a>
		        </li>
		        <li>
		          <a href="relation.html">社区广场</a>
		        </li>
				<li>
				  <a href="youxue.html">我的游学</a>
				</li>
		      </ul>
		    </div>
		    <!-- 站内搜索 -->
		    <div class="xtx_search clearfix">
		      <!-- 购物车 -->
		      <a href="#" class="xtx_search_cart sprites">
		        <i>2</i>
		      </a>
		      <!-- 搜索框 -->
		      <div class="xtx_search_wrapper mi">
		        <input type="text" placeholder="搜一搜">
				<ul class="result-list">
				    <li><a href="#">九寨沟</a></li>
				    <li><a href="#">桂林山水</a></li>
				    <li><a href="#">秦皇岛</a></li>
				    <li><a href="#">清明上河园</a></li>
				    <li><a href="#">万里长城</a></li>
				    <li><a href="#">嵩山</a></li>
				</ul>
		      </div>
			  
		    </div>
			<div style="margin-left: 15px;">
				<!-- <i style="font-size: 24px;" class="iconfont icon-setting"></i> -->
				<img src="./img/iconfont/shezhi.png"  style="width: 23px;height: 23px;"/>
			</div>
		  </div>
		</div>
		
		<div class="column">
			<div class="xtx_entry">
			  <div class="wrapper">
			    <!-- 分类 -->
			    <div class="xtx_category">
			      <!-- 顶级分类 -->
			      <ul class="xtx_category_super">
			        <li>
						<a href="javascript:;">
							美国
							<small>飞翔的喷泉</small>
						</a>
					</li>
			        <li class="active">
						<a href="javascript:;">
							马尔代夫
							<small>大海</small>
						</a>
					</li>
			        <li>
						<a href="javascript:;">
							澳大利亚
							<small>大堡礁</small>
							<small>大峡谷</small>
						</a>
					</li>
			        <li>
						<a href="javascript:;">
							普罗旺斯
							<small>薰衣草</small>
						</a>
					</li>
			        <li>
						<a href="javascript:;">
							巴黎
							<small>卢浮宫</small>
						</a>
					</li>
			        <li>
						<a href="javascript:;">
							冰岛
							<small>世界的尽头</small>
						</a>
					</li>
			        <li>
						<a href="javascript:;">
							印度
							<small>泰姬陵</small> 
						</a>
					</li>
			        <li>
						<a href="javascript:;">
							贝加尔湖
						</a>
					</li>
			        <li>
						
						<a href="javascript:;">
							布拉格
							<small>城堡</small>
						</a>
					</li>
			        <li>
						
						<a href="javascript:;">
							北京<small>万里长城</small>
						</a>
					</li>
			      </ul>
			    </div>
			    <!-- 焦点图 -->
		    <div class="xtx_banner">
		    	<img class="item" src="./img/img/ddb.jpg" style="width: 100%;">
		        <img class="item active" src="./img/img/pq2.jpg" style="width: 100%;">
		        <img class="item" src="./img/img/medf.jpg" style="width: 100%;">
		        <img class="item" src="./img/img/xyc1.jpg" style="width: 100%;">
		        <img class="item" src="./img/img/lfg3.jpg" style="width: 100%;">
		        <img class="item" src="./img/img/bd9.jpg" style="width: 100%;">
		        <img class="item" src="./img/img/tjl.jpg" style="width: 100%;">
		        <img class="item" src="./img/img/b1.jpg" style="width: 100%;">
		    	<img class="item" src="./img/img/blg1.jpg" style="width: 100%;">
		    	<img class="item" src="./img/img/w2.jpg" style="width: 100%;">
		      </div>
			    </div>
			  </div>
			</div>
		</div>
		<!-- 轮播图 -->
		<div class="slideshow">
			<div class="slideshow-lunbo">
				
				<div class="box">
				  <!-- Swiper -->
				  <div class="swiper mySwiper">
				    <div class="swiper-wrapper">
				      <div class="swiper-slide"><img src="img/3.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/4.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/11.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/7.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/6.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/5.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/8.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/9.jpg" alt=""></div>
				      <div class="swiper-slide"><img src="img/10.jpg" alt=""></div>
				    </div>
				    <div class="swiper-pagination"></div>
				  </div>
				</div>
			</div>
			<div class="slideshow-img">
				<div class="slideshow-img-img">
					<img src="img/img/tam8.png" style="height: 100%;">
				</div>
				<div class="slideshow-img-img">
					<img src="img/img/gg13.jpg" style="height: 100%;">
				</div>
				<div class="slideshow-img-text">
					<h3 class="biaoti">中国景点</h3>
					<div class="zhengwen">中国是一个拥有悠久历史和丰富文化的国家，因此许多名胜古迹成为了中国旅游业的重要组成部分。
						                  这些风景名胜区从不同的角度可以有不同的划分，大体上可分为如下五种风景区类型：
					</div>
					<div class="zhengwen">
						1.湖泊（白洋淀、西湖、玄武湖）
						2.山岳（黄山、泰山、衡山、华山） 
						3.森林（西双版纳、卧龙、神农架）
						4.山水（桂林漓江、武夷九曲溪）
						5.海滨 (海南天涯海角、厦门、大连)。</div>
				</div>
				
			</div>
		</div>
		<!-- 国内旅行 -->
		<div class="guonei xtx_goods_new">
			<h1>国内旅行</h1>
			<div class="guonei-right">
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-xinpin"></i> -->
					<img src="img/iconfont/xinpin.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">新品</a>
				</div>
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-farendaibiao"></i> -->
					<img src="img/iconfont/daibiao.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">代表</a>
				</div>
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-huodong"></i> -->
					<img src="img/iconfont/huodong.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">活动</a>
				</div>
				<h3>更多></h3>
			</div>
		</div>
		
		
		
		<div class="china">
			<div class="china-box1">
				<div class="china-box1-img">
					<img src="img/img/jzg.jpg">
				</div>
				<div class="china-box1-text zhengwen">
					走进九寨沟，就像走进了“童话世界”，超凡的自然风光和浓厚的民族风情交相
					相辉映，九寨沟里面有九个藏族村寨，其中大小景点奇多。
				</div>
			</div>
			<div class="china-box1">
				<div class="china-box1-img">
					<img src="img/img/hl.jpg">
				</div>
				<div class="china-box1-text zhengwen">
					黄龙风景区，被联合国列为世界自然遗产。因沟中有许多的彩池，
					随着周围景色变幻的阳光照射角度变化出五彩的颜色称：“人间瑶池”。
				</div>
			</div>
			<div class="china-box1">
				<div class="china-box1-img">
					<img src="img/img/ems.jpg">
				</div>
				<div class="china-box1-text zhengwen">
				云上天宫，云上金顶，天下峨眉，四面菩萨，十方普贤，日出和翻涌无边的云海,青城天下幽，峨眉天下秀,真实存在的仙境——峨眉山
		       。
				</div>
			</div>
			<div class="china-box1">
				<div class="china-box1-img">
					<img src="img/img/djy.jpg">
				</div>
				<div class="china-box1-text zhengwen">
					都江堰是成都很值得去的一个景点，不可错过著名的水利工程，
					"水旱从人，不知饥馑”的天府之国，加上天然氧吧--青城山，不会让你失望的！
				</div>
			</div>
			<div class="china-box3">
				<div class="zhengwen-a">九寨沟★★★★
				其有千年古木，奇花异草，是夏季消暑的理想之地。
				</div>
				<div class="zhengwen-a">黄龙风景区★★★
				景区以彩池、雪山、峡谷、森林称为“四绝”。
				</div>
				<div class="zhengwen-a">峨眉山★★★
					你可以感受大自然的鬼斧神工和大自然馈赠。
				</div>
				<div class="zhengwen-a">都江堰★★★★
					山脉与平原比肩为邻，河流穿行于高山峡谷，极其壮观。
				</div>
			</div>
		</div>
		<!-- 境外旅行 -->
		<div class="guonei xtx_goods_popular">
			<h1>境外旅行</h1>
			<div class="guonei-right">
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-xinpin"></i> -->
					<img src="img/iconfont/xinpin.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">新品</a>
				</div>
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-farendaibiao"></i> -->
					<img src="img/iconfont/daibiao.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">代表</a>
				</div>
				
				<h3>更多></h3>
			</div>
		</div>
		<div class="foreign">
			<div class="foreign-top">
				<div class="foreign-top1">
					
					<div class="foreign-top1-size">
							<img src="img/img/aqh5.jpg"style="height: 150px;"/>
							<p>爱琴海位干希腊半岛和小亚细亚半岛之间，是希腊半岛东部的一个蓝色系海洋，属地中海的一部分，是黑海沿岸国家通往地中海以及大西
								洋印度洋的心经水域，在航运和战略上且有重要地位:它以独特的风与故事，一直被视为纯洁的爱情天堂，是世界上十大浪漫爱情圣
								地之一，也是浪漫情调旅程的象征。爱琴海海域南北长610公里，东西宽300公里，海岸线非常曲折，港湾众多，岛屿星罗棋布，因此爱
								琴海又有“多岛海”之称。
						</p>
					</div>
				</div>
				<div class="foreign-top2">
					<img src="img/img/xn1.jpg"style="height: 155px;"/>
					<div class="oreign-top2-title"style="text-align:center;">悉尼歌剧院</div>
					<div class="oreign-top2-text">悉尼歌剧院(Sydney Opera House)，位于悉尼市区北部，是悉尼市地标建筑物，由丹麦建筑师约恩·乌松(Jorn Utzon)设计，一座贝
						壳形屋顶下方是结合剧院和厅室的水上综合建筑。歌剧院内部建筑结构则是仿效玛雅文化和阿兹特克神庙。该建筑1959年3月开始动工
						于1973年10月20日正式竣工交付使用，共耗时14年。悉尼歌剧院是澳大利亚的建筑，也是20世纪具特色的建筑之一，2007年被联合国教
						科文组织评为世界文化遗产。</div>
				</div>
				<div class="foreign-top2">
					<img src="img/img/nd.jpg"/>
					<div class="oreign-top2-title"style="text-align:center;">新西兰南岛</div>
					<div class="oreign-top2-text">新西兰南岛是组成新西兰的主要两个海岛之一位干新西兰南部，北以库克海峡与北岛相隔;南隔福沃海峡与斯图尔特岛相望，西距澳大
						利亚1600公里，东邻汤加、婓济。新西兰南岛全境多山，山地面积占全国面积的50%。无论是茂盛的雨林，清澈的湖泊，还是绿草茵茵
						的和山坡水清沙白的海滩，无不显示新西兰的清新和美妙。基督城是南岛最大的城市，充满历史痕迹的石造建筑展现曲雅的英国风情
						繁花绿树，公园处处，为它搏得“花园城市”的美名。</div>
				</div>
				
				<div class="foreign-top2">
					<img src="img/img/fjd2.jpg"style="height: 155px;"/>
					<div class="oreign-top2-title"style="text-align:center;">斐济群岛</div>
					<div class="oreign-top2-text">斐济群岛位于南太平洋中心、介于赤道与南回归线之间，是纽澳前往北美的必经之地。
						世界著名的度假胜地、旅游天堂，被誉为“全球十大蜜月旅游胜地之一”“全球十大美女海滩之一”。
						斐济是个多种族的国家，首都苏瓦，是全国政治中心和服装业基地，也是南太平洋著名的天然良港。
						婓济地跨东，西半球，由333个岛屿组成，其中106个岛有人居住，大部分是珊瑚礁环绕的火山岛。英语是婓济的官方语言。
						斐济的两大国粹，一是鲸鱼的平齿，叫“塔布阿”，一是当地的一种土产饮料“杨格纳”。</div>
				</div>
			</div>
			<div class="foreign-bottom">
				<div class="foreign-bottom1">
					<img src="img/img/ys1.jpg" />
					<p>美国-----约塞米蒂国家公园</p>
				</div>
				<div class="foreign-bottom1">
					<img src="img/img/yg2.jpg" />
					<p>阿根廷-----伊瓜苏大瀑布</p>
				</div>
				<div class="foreign-bottom1">
					<img src="img/img/bs1.jpg" />
					<p>美国-----班赛岛</p>
				</div>				
				
				<div class="foreign-bottom1">
					<img src="img/img/blz1.jpg" />
					<p>伯利兹-----伯利兹蓝洞</p>
				</div>
				
				<div class="foreign-bottom1">
					<img src="img/img/wy2.jpg" />
					<p>玻利维亚-----乌尤尼盐沼</p>
				</div>
			</div>
		</div>
		<!-- 一起旅行 -->
		<div class="guonei xtx_goods_brand">
			<h1>一起旅行</h1>
			<div class="guonei-right">
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-xinpin"></i> -->
					<img src="img/iconfont/xinpin.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">新品</a>
				</div>
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-farendaibiao"></i> -->
					<img src="img/iconfont/daibiao.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">代表</a>
				</div>
				<div class="guonei-right-box">
					<!-- <i class="iconfont icon-huodong"></i> -->
					<img src="img/iconfont/huodong.png"/ style="width: 18px;height: 18px;">
					&nbsp;<a href="#">活动</a>
				</div>
				<h3>更多></h3>
			</div>
		</div>
		<div class="together">
			<!-- <img class="together-left" src="img/img/7.jpg"/> -->
			<div class="together-left">
				<div class="video">
				  <video src="https://v.itheima.net/LapADhV6.mp4" controls poster="img/jingse1.jpg"></video>
				</div>
			</div>
			<div class="together-moddle1" style="padding: 10px;">
				<img src="img/btq.jpg" style="height: 200px;"/>
				<div class="together-moddle1-one"><p>千百年来享有“桂林山水名甲天下”的美誉</p></div>
				<div class="together-moddle1-two aiaixin1">
					<div style="color: #999;">现场</div>
					<!-- <div class="iconfont icon-aixin" style="size: 20px;color: #999;"></div> -->
					<img src="img/爱心.png"  />
				</div>
			</div>
			<div class="together-moddle1" style="padding: 10px;">
				<img src="img/cd.jpg" style="height: 200px;"/>
				<div class="together-moddle1-one"><p>梦想依旧在，桃花依旧为你开</p></div>
				<div class="together-moddle1-two aiaixin2">
					<div style="color: #999;">现场</div>
					<!-- <div class="iconfont icon-aixin" style="size: 20px;color: #999;"></div> -->
					<img src="./img/爱心.png" />
				</div>
			</div>
			<div class="together-moddle1" style="padding: 10px;">
				<img src="img/sls.jpg" style="height: 200px;"/>
				<div class="together-moddle1-one"><p>武以寺名，寺以武显</p></div>
				<div class="together-moddle1-two aiaixin3">
					<div style="color: #999;">现场</div>
					<!-- <div class="iconfont icon-aixin" style="size: 20px;color: #999;"></div> -->
					<img src="img/爱心.png"  />
				</div>
			</div>
		</div>
		
		
		
		<!-- 公共底部 -->
		<div class="xtx_footer clearfix xtx_goods_topic">
		  <div class="wrapper">
		    <!-- 联系我们 -->
		    <div class="contact clearfix">
		      <dl>
		        <dt>客户服务</dt>
		        <dd class="chat">在线客服</dd>
		        <dd class="feedback">问题反馈</dd>
		      </dl>
		      <dl>
		        <dt>关注我们</dt>
		        <dd class="weixin">公众号</dd>
		        <dd class="weibo">微博</dd>
		      </dl>
		      <dl>
		        <dt>下载APP</dt>
		        <dd class="qrcode">
		          <img src="./img/qrcode.jpg">
		        </dd>
		        <dd class="download">
		          <span>扫描二维码</span>
		          <span>立马下载APP</span>
		          <a href="javascript:;">下载页面</a>
		        </dd>
		      </dl>
		      <dl>
		        <dt>服务热线</dt>
		        <dd class="hotline">
		          400-0000-000
		          <small>周一至周日 8:00-18:00</small>
		        </dd>
		      </dl>
		    </div>
		  </div>
		  <!-- 其它 -->
		  <div class="extra">
		    <div class="wrapper">
		      <!-- 口号 -->
		      <div class="slogan">
		        <a href="javascript:;" class="price">价格亲民</a>
		        <a href="javascript:;" class="express">物流快捷</a>
		        <a href="javascript:;" class="quality">品质新鲜</a>
		      </div>
		      <!-- 版权信息 -->
		      <div class="copyright">
		        <p>
		          <a href="javascript:;">关于我们</a>
		          <a href="javascript:;">帮助中心</a>
		          <a href="javascript:;">售后服务</a>
		          <a href="javascript:;">配送与验收</a>
		          <a href="javascript:;">商务合作</a>
		          <a href="javascript:;">搜索推荐</a>
		          <a href="javascript:;">友情链接</a>
		        </p>
		        <p>CopyRight &copy; 旅游网</p>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 电梯导航 -->
		<div class="xtx-elevator">
		  <ul class="xtx-elevator-list">
		    <li><a href="javascript:;" data-name="new">国内旅行</a></li>
		    <li><a href="javascript:;" data-name="popular">境外旅行</a></li>
		    <li><a href="javascript:;" data-name="brand">一起旅行</a></li>
		    <li><a href="javascript:;" data-name="topic">前往底部</a></li>
		    <li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li>
		  </ul>
		</div>
		<script src="js/index.js"></script>
		<script src="./tools/swiper.min.js"></script>
		<script src="./tools/lodash.min.js"></script>
		
		<script type="text/javascript">

		
		// 轮播图开始
		 var swiper = new Swiper(".mySwiper", {
		      // 小圆点
		      pagination: {
		        el: ".swiper-pagination",
		      },
		      // 自动播放
		      autoplay: {
		        delay: 1000,//1秒切换一次
		        disableOnInteraction: false,  // 鼠标点击 触摸之后，自动继续播放
		      },
		      // 可以键盘控制
		      keyboard: {
		        enabled: true,
		        onlyInViewport: true,
		      },
		    });
		
		// 轮播图结束
		
		const input1 = document.querySelector('.mi input')
		const ul2 = document.querySelector('.result-list')
		input1.addEventListener('focus', function () {
		    ul2.style.display = 'block'
		    input1.classList.add('search')
		})
		input1.addEventListener('blur', function () {
		    ul2.style.display = 'none'
		    input1.classList.remove('search')
		})
		
		
		</script>
	</body>
</html>
